{% extends "layout.html" %}
{% block styles %}
	<link rel="stylesheet" type="text/css" href="../../../static/sass/common.css">
	<link rel="stylesheet" type="text/css" href="../../../static/sass/icon.css">
	<link rel="stylesheet" type="text/css" href="../../../static/sass/detail.css">
{% endblock %}
{% block content %} 
	 <div class="fz16 detail">
		<div class="info">
			<div class="info-bg">
				<img src='{{cover}}'>
			</div>
			<div class="btn-box">
				<span class="goback zymkwap ift-goback"></span>
				<span class="like zymkwap ift-collect"></span>
				<span class="msg zymkwap ift-message"></span>
			</div>
			<div class="cover">
				<span class="score">
					<i class="zymkwap ift-xing"></i>
					<span>{{data.score}}</span>
				</span>
				<img src='{{cover}}'>
			</div>
			<span class="name ellipsis">{{data.comic_name}}</span>
			<span class="author">作者: {{data.author_name}}</span>
			<div class="tags-box">
				{% for item in data.comic_type %}
					<a class="tags">
						<span class="tags-txt" style="background: {{item.bg}}">{{item.name}}</span>
					</a>
				{% endfor %}
			</div>
			<span class="hasread zymkwap ift-fire">{{data.total_click}}</span>
		</div>
		  <div class="handle">
			<a class="downApp" href="">下载APP</a>
			<a class="read" href="" style="display: none"></a>
			<a class="read" href="/read?comic_id=item.comic_id&chapter_id=item.chapter_id}}">开始阅读</a>
		</div>
			<div class="tab-container" >
				<ul class="tab-title-container">
					{%for item in tab%}
						<li class="tab-title zymkwap">{{item}}</li>
					{% endfor %}
				</ul>
				<div class="comicDetail">
					<div class="hd">剧情简介</div>
					<div class="content">{{data.desc}}</div>
					<div class="hd">作者信息</div>
					<div class="content">
						{% if data.author_info.Uid %}
							<img class="authorAvatar" src='{{authorAvatar}}'>
						{% endif %}
						<div class="authorWrap">
							<p class="authorName">{{data.author_info.Uname}}<span class="authorLevel zymkwap ift-autor_xr"></span></p>
							<p>粉丝<span class="fansNum">{{data.author_info.Cfans}}</span>人</p>
						</div>
					</div>
					<div class="hd">作者公告</div>
					<div class="content">{{ data.author_info.notice }}</div>
				</div>
				<div class="catalog">
					<div class="cataBox">
						<div class="cateHd">
							<span>最后更新:&nbsp;</span>
							<time datetime='{{data.update_time}}'>{{data.update_time_span}}</time>
							<div class="sortBtn zymkwap ift-you">逆序</div>
						</div>
						<ul class="listCon {{'autoHeight' if not data.chapter_list.length>12}}">
							{% for listItem in data.chapter_list %}
								<li class="listItem" >
									{% if read_chapter == listItem.chapter_id %}
										<div class="readChapter zymkwap ift-read" ></div>
									{% endif %}
									{% if listItem.price>0 %}
										{% if isPurchase %}
											<img class="lockIcon" src="../../../static/images/icons/unlock.png" >
										{% else %}
											<img class="lockIcon" src="../../../static/images/icons/lock.png">
										{% endif %}
									{% endif %}
									<a class="chapterBtn" href="/read?'comic_id=comicInfo.comic_id&chapter_id=listItem.chapter_id"><span class="ellipsis">{{listItem.chapter_name}}</span></a>
								</li>
							{% endfor %}
						</ul>
						{% if data.chapter_list.length>12 %}
							<div class="more">查看全部</div>
						{% endif %}
					</div>
				</div>
				<div class="support">
				<ul class="sup-counts">
					<li class="tj" data-btn="tj">
						<div class="sup-icons icon-tj"  data-btn="tj"></div>
						<span class="sup-data">推荐<span class="num">{{data.recommend}}</span>人</span>
					</li>
					<li class="ds" data-btn="ds">
						<div class="sup-icons icon-ds" data-btn="ds"></div>
						<span class="sup-data">打赏<span class="num">{{data.gold}}</span>元宝</span>
					</li>
					<li class="yp" data-btn="yp">
						<div class="sup-icons icon-yp" data-btn="yp"></div>
						<span class="sup-data">月票<span class="num">{{data.total_ticket}}</span>张</span>
					</li>
					<li class="df" data-btn="df">
						<div class="sup-icons icon-df"  data-btn="df"></div>
						<span class="sup-data">打分<span class="num">{{data.jury}}</span>人</span>
					</li>
					<li class="sc" data-btn="sc">
						<div class="sup-icons icon-sc" data-btn="sc"></div>
						<span class="sup-data">收藏<span class="num">{{data.collection}}</span>人</span>
					</li>
					<li class="fx" data-btn="fx">
						<div class="sup-icons icon-fx" data-btn="fx"></div>
						<span class="sup-data">分享<span class="num">{{data.share}}</span>次</span>
					</li>
				</ul>
				<div class="fansRank">
					<div class="hd">
						<span class="hd-title">粉丝排行</span>
						<div class="switch-rank">
							<div data-rank="hot" class="rankBtn active">活跃榜</div>
							<div data-rank="gold" class="rankBtn">打赏榜</div>
						</div>
					</div>
					<div class="rank-list hot">
						{% for item in data.fans_hot %}
							<div class="list-item">
								<span class="idx">{{loop.index}}.</span>
								<img class="userAvatar" src='{{item.head}}'>
								<span class="userName">{{item.name}}</span>
								<div class="tinyData">
									<span class="tinyNum">{{item.count_num}}</span>
									<span class="tinyText">活跃度</span>
								</div>
							</div>
						{% endfor %}
					</div>
					<div class="rank-list gold" style="display: none">
						{% for item in data.fans_gold %}
							<div class="list-item" >
								<span class="idx">{{loop.index}}.</span>
								<img class="userAvatar" src='{{item.head}}'>
								<span class="userName">{{item.name}}</span>
								<div class="tinyData">
									<span class="tinyNum">{{item.count_num}}</span>
									<span class="tinyText">个金币</span>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
			</div>
		<div class="recommend">
			<div class="hd">相关推荐</div>
			<div >
				<div class="swiper-wrapper">
					 {%for value in data.relation_list%}
					<div class="swiper-slide">
						<div class="comicItem">
							<a class="comic-item" href="/detail?comic_id={{value.comic_id}}">
								<div>
									<div class="thumbnail">
										<div class="check"></div>
										<img class="item-img" src="{{value.src}}" />
										<span class="zymkwap ift-xing score"></span>
										<span class="chapter ellipsis" v-if="!type">{{value.last_chapter['name']}}</span>
										<span class="chapter ellipsis" v-if="type=='read'">阅读至：{{value.chapter_name}}</span>
									</div>
									<span class="title ellipsis">{{value.comic_name}}</span>
									<span class="desc ellipsis">{{value.readtime}}</span>
									<span class="desc ellipsis">{{value.comic_feature}}</span>
								</div>
							</a>
						</div>
					</div>
					 {%endfor%}
				</div>
			</div>
		</div>
		<div class="layer">
			<div class="layerMsg">
			</div>
		</div>
	 </div>
{% endblock %}
{% block script %}
	<script src="../../../static/js/common/jquery.min.js"></script>
	<script src="../../../static/js/common/util.js"></script>
	<script src="../../../static/js/detail.js"></script>
{% endblock %}